<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园报修系统</title>
    <link rel="icon" href="ICO.png">
    <link rel="stylesheet" href="bootstrap-5.3.3-dist/bootstrap.min.css">
    <link rel="stylesheet" href="css.css">
    <script src="vue/vue_2.0.js"></script>
    <script src="axios/axios.min.js"></script>
</head>

<body>
    <div class="main-div">
        <h2 class="index-h2">校 园 报 修 系 统 —— 系 统 用 户 注 册</h2>
        <div class="logo-div">
            <img src="shouye.png" />
        </div>
        <div class="form-div">
            <!-- 注册表单开始 -->
            <div id="reg-div">
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="u_uid" v-model="u_uid" placeholder="请设置注册账号" required>
                    <label for="u_uid">请设置长度为6-12位的注册账号</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="u_pwd" v-model="u_pwd" placeholder="请输入密码" required>
                    <label for="u_pwd">请设置8-20位的登录密码</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="u_rpwd" v-model="u_rpwd" placeholder="请二次确认密码" required>
                    <label for="u_rpwd">请二次确认密码</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="u_phone" v-model="u_phone" placeholder="请输入手机号" required>
                    <label for="u_phone">请输入11位手机号</label>
                </div>
                <div class="form-sub-div mb-3">
                    <button type="button" @click="register" class="btn btn-outline-light form-control">注 册 ☑</button>
                </div>
            </div>
            <!-- 注册表单结束 -->
            <div class="form-other-div mb-3">
                <a href="index.html">
                    <button type="button" class="btn btn-outline-light form-control">已有账号，返回登录 🔙</button>
                </a>
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#reg-div",
            data: {
                u_uid: "",
                u_pwd: "",
                u_rpwd: "",
                u_phone: ""
            },
            methods: {
                register() {

                    if (this.u_uid.length < 6 || this.u_uid.length > 12) {
                        alert("账号长度不符合要求！");
                        return false;
                    }
                    if (this.u_pwd.length < 8 || this.u_pwd.length > 20) {
                        alert("密码长度不符合要求！");
                        return false;
                    }
                    if (this.u_pwd != this.u_rpwd) {
                        alert("两次密码不一致！");
                        return false;
                    }
                    let regex = /^1[3-9]\d{9}$/; // 正则表达式验证手机号
                    if (this.u_phone.length != 11 || !regex.test(this.u_phone)) {
                        alert("手机号格式错误！");
                        return false;
                    }

                    axios.post("php/register.php", {
                        u_uid: this.u_uid,
                        u_pwd: this.u_pwd,
                        u_phone: this.u_phone
                    })
                        .then(res => {
                            if (res.data.code == 1) {
                                alert("注册成功，返回登录！");
                                location='index.html';
                            }   
                            if (res.data.code == -1) {
                                alert("注册失败，请重试!");
                            }
                            if (res.data.code == 0) {
                                alert("账号已被使用!");
                            }
                            if (res.data.code == -2) {
                                alert("数据查询失败!");
                            }
                        }).catch(err => {
                            console.log(err);
                        })
                }
            }
        })
    </script>
</body>

</html>